import React from 'react';
import { Spin } from 'antd';
import { isEqual, isEmpty, cloneDeep } from 'lodash';
import { WeaTools, WeaErrorPage, WeaLocaleProvider, WeaAlertPage } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
const { ls } = WeaTools;

import EHeader from '../common/EHeader';
import EContent from './EContent';
import FooterMore from '../common/FooterMore';
// import { NoRightCom } from '../../util/common';

// 元素组件
class OdocCenter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      edata: null,
      refresh: false,
      needMore: true,
      moreUrl: '',
    };
  }

  handleDelete = () => {
    this.setState({ edata: null });
    ls.set(`edata-${this.props.config.params.eid}`, null);
  }

  handleRefresh = () => {
    this.setState({ refresh: true });
    this.handleEData(this.props.config.params);
  }

  handleEData = (params) => {
    const { eid, api } = params;
    this.setState({ edata: ls.getJSONObj(`edata-${eid}`) });
    WeaTools.callApi(api || '/api/portal/element/odoccenter', 'POST', { ...params }).then((result) => {
      ls.set(`edata-${eid}`, result);
      if (result.data) {
        this.setState({
          edata: result,
          refresh: false,
          needMore: result.data.moreData.showMore,
          moreUrl: result.data.moreData.moreUrl || '',
        });
      } else {
        this.setState({
          edata: result,
          refresh: false,
        });
      }
    });
  }

  onChangeCanEdit = (value) => {
    this.setState({ canEdit: value });
  }

  componentDidMount () {
    this.handleEData(this.props.config.params);
  }

  // componentWillReceiveProps (nextProps) {
  //   const { item, params, isHasRight } = this.props.config;
  //   const config = { item, params, isHasRight };
  //   const _config = {
  //     item: nextProps.config.item,
  //     params: nextProps.config.params,
  //     isHasRight: nextProps.config.isHasRight,
  //   };
  //   if (!isEqual(config, _config) || nextProps.config.isRender) {
  //     this.handleEData(nextProps.config.params);
  //   }
  // }

  shouldComponentUpdate (nextProps, nextState) {
    const { item, params, isHasRight } = this.props.config;
    const config = { item, params, isHasRight };
    const _config = {
      item: nextProps.config.item,
      params: nextProps.config.params,
      isHasRight: nextProps.config.isHasRight,
    };
    return !isEqual(this.state, nextState) ||
      !isEqual(config, _config) ||
      !isEmpty(nextProps.fontSizeMp)
  }

  onRef = (ref) => {
    this.child = ref;
  }

  handleTabData = (tabid, needHandleChild = false) => {
    const { edata } = this.state;
    this.setState({
      edata: { ...edata, currenttab: tabid },
    });
    !needHandleChild && this.child.handleTabData(tabid);
  }

  render () {
    const { edata = {}, refresh, needMore } = this.state;
    const { config, fontSizeMp } = this.props;
    if (!config || !edata) return <div />;
    const { currenttab = '1', tabids, titles, esetting = {}, counts, data = {} } = edata;
    const { tabsetting = {} } = data;
    const { isHasRight, item } = config;
    const { eid, ebaseid, contentview, style } = item;
    const { style: style1 = {} } = contentview;
    const datas = {
      currentTab: currenttab,
      tabids,
      titles,
      counts,
      isShowSettingShowType: tabsetting.isShowSettingShowType,
      handleTabData: this.handleTabData,
      tabwidth: esetting.tabwidth,
      methodvalue: esetting.methodvalue,
      tabstyle: esetting.tabstyle,
      tabvalue: esetting.tabvalue,
    };
    let edata_img = { data: {} };
    if (!isEmpty(edata) && isHasRight) {
      edata_img = cloneDeep(edata);
      if (edata_img.data && edata_img.data.tabsetting) edata_img.data.tabsetting.imgs = [];
    }
    let EContentHtml = <div />;
    if (isHasRight && !isEmpty(edata)) {
      EContentHtml = (
        <EContent ecId={`${this && this.props && this.props.ecId || ''}_EContent@p8oz42`}
          onRef={this.onRef}
          config={config}
          ref={'eContent'}
          fontSizeMp={fontSizeMp}
          handleDelete={this.handleDelete}
          handleRefresh={this.handleRefresh}
          edata={!refresh ? edata : edata_img}
          onChangeCanEdit={this.onChangeCanEdit}
          changeMore={this.changeMore}
          needMore={needMore}
          customClickMore={this.clickMore}
          handleTabData={this.handleTabData}
        />
      );
    } else {
      EContentHtml = (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@fzhhr4`}
          icon={<i className="icon-coms-blank" />}
          iconSize={120}
        >
          <div style={{ color: '#000' }}>
            {getLabel('83553', '暂无数据')}
          </div>
        </WeaAlertPage>
      );
    }
    return (
      <div className="item"
        style={style}
        id={`item_${eid}`}
        data-eid={eid}
        data-ebaseid={ebaseid}
        data-needRefresh={item.needRefresh}
        data-cornerTop={item.cornerTop}
        data-cornerTopRadian={item.cornerTopRadian}
        data-cornerBottom={item.cornerBottom}
        data-cornerBottomRadian={item.cornerBottomRadian}
      >
        <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@3eadnr`}
          datas={datas}
          config={config}
          handleRefresh={this.handleRefresh}
          handleDelete={this.handleDelete}
          fontSizeM={fontSizeMp}
          needMore={needMore}
          customClickMore={this.clickMore}
        />
        <div className="setting" id={`setting_${eid}`} />
        <div className="content" id={`content_${eid}`} style={{ width: 'auto', height: '100%' }}>
          <div style={{ width: 'auto', height: '100%', position: 'relative' }}>
            <div className="content_view" id={`content_view_id_${eid}`} style={{ height: style1.height }}>
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@xwd4wb`} spinning={refresh}>{EContentHtml}</Spin>
            </div>
            <div style={{ textAlign: 'right' }} id={`footer_${eid}`}>
              <FooterMore ecId={`${this && this.props && this.props.ecId || ''}_FooterMore@rovwd3`} config={this.props.config} needMore={needMore} customClickMore={this.clickMore} />
            </div>
          </div>
        </div>
      </div>
    );
  }

  changeMore = (bool, moreUrl) => {
    this.setState({ needMore: bool, moreUrl });
  }

  clickMore = () => {
    const { moreUrl } = this.state;
    const { protocol, host } = window.location;
    const url = `${protocol}//${host}/spa/odoc/static/index.html#${moreUrl}`;
    window.open(url);
  }
}

class MyErrorHandler extends React.Component {
  render () {
    const hasErrorMsg = this.props.error && this.props.error !== '';
    return (<WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@lfy9xl`} msg={hasErrorMsg ? this.props.error : getLabel(385218, '对不起，该页面异常，请联系管理员！')} />
    );
  }
}

OdocCenter = WeaTools.tryCatch(React, MyErrorHandler, { error: '' })(OdocCenter);
export default OdocCenter;

